<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>秒杀PowerPoint的幻灯工具--易易工作室作品--By ee studio</title>
		<meta name="description" content="秒杀PowerPoint的幻灯工具--由易易工作室出品--Proudly Powered By ee Studio">
		<meta name="author" content="陈耀军(EurekaChen)">
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="css/eureka.css" rel="stylesheet" />
    <style>
      img{border:3px ridge #FFCC80}
    </style>
  </head>

  <body class="impress-not-supported">
    <div class="fallback-message">
      <p>你的浏览器版本可能太旧了 <b>不支持完整的演示</b> </p>
      <p>良好的体验需要新版本的 <b>Chrome</b>, <b>Safari</b> 或 <b>Firefox</b>浏览器。</p>
    </div>

    <div id="impress">

      <section id="title" class="level1 step" data-scale="2" data-x="0" data-y="0" data-z="500"  >
        <h1 style="font-size:80px;font-weight:bold;text-align:center; margin-top:100px">秒杀<span style="color:#E65100">PowerPoint</span>的<br/>幻灯工具</h1>
        <p style="text-align:center;margin:30px;">陈耀军</p>
        <p style="text-align:center;font-size:30px;color:#E65100">【请使用空格或方向键进行操控】</p>
      </section>

      <section id="why" class="level1 slide step" data-x="0" data-y="-1200" data-z="500" >
        <h1 style="font-size:60px;text-align:center;margin-top:60px;"><span style="color:#E65100">PowerPoint</span>很强大！</h1>
          <img style="width:400px;height:300px;margin:20px 50px 20px 180px" src="images/powerpoint.png" />
        <p style="font-size:60px;text-align:center;margin-top:10px;">并且我用的好好的！</p>

        <p style="font-size:60px;text-align:center;margin-top:40px">为什么我还要用别的工具？</p>
      </section>

      <section id="antippt" class="level1 slide step" data-x="0" data-y="-2000" data-z="500">
        <p>这是我以前做的展示：</p>
        <iframe style="width:750px;height:550px;" src="http://eeweb.top/demo/antippt" ></iframe>
        <p style="text-align:center">【请点击内部方向按钮查看嵌入的展示，点外部继续】</p>
      </section>

      <section id="markdown" class="level1 slide step" data-x="0" data-y="-2800" data-z="500" >
        <h1 style="font-size:60px;text-align:center;margin-top:60px;">展示中我力推了Markdown</h1>
        <img style="width:400px;height:200px;margin:20px 50px 20px 180px;border-radius:30px;" src="images/md.jpg" />
        <h1 style="font-size:45px;text-align:center;margin-top:10px">而Markdown并不是用来做幻灯的</h1>
        <h1 style="font-size:45px;text-align:center;margin-top:20px">Markdown是用来写<span style="color:#E65100">内容</span>的</h1>
        <h1 style="font-size:50px;text-align:center;margin-top:50px;font-weight:bold;color:#E65100">内容才是关键</h1>
        <h1 style="font-size:30px;text-align:center;margin-top:50px">没有内容，一切都是白搭</h1>
      </section>

      <section id="content" class="level1 slide step" data-x="0" data-y="-2800" data-z="450" data-rotate-y="180"  style="opacity:1">
        <h1 style="font-size:60px;text-align:center;margin-top:150px;">有了内容之后</h1>
        <h1 style="font-size:60px;text-align:center;margin-top:100px">我们才需要<span style="color:#E65100">吸引观众视线</span></h1>
        <h1 style="font-size:60px;text-align:center;margin-top:100px">我们才需要<span style="color:#E65100">炫酷的展示效果</span></h1>
      </section>

      <section id="traction"  class="level1 slide step" data-x="0" data-y="-3600" data-z="550">
        <p style="font-size:40px;text-align:center;margin-top:80px;">虽然PowerPoint不断升级，功能越来强大</p>
        <p style="font-size:40px;text-align:center;margin-top:40px;">但还是很多人说<p>
          <h1 style="font-size:60px;font-weight:bold;color:#E65100;text-align:center;margin-top:60px;">PowerPoint已经Out了</h1>
          <p style="font-size:30px;text-align:center;margin-top:60px;">那么，还有哪些工具，是可以用来作演示的呢？</p>
          <p style="font-size:40px;text-align:center;margin-top:60px;">下面我来介绍一下这些从网上找到的工具</p>
          <p style="font-size:20px;text-align:center;margin-top:40px;">【也许收集的并不齐全，<span style="color:#E65100">但干货在最后哦</a></span>】</p>
        </section>

        <section   class="level1 slide step" data-x="1200" data-y="-3600" data-z="500" data-rotate="90" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">WPS2016之WPS演示</h1>
          <img src="images/wps.png" style="width:700px;height:400px">
          <p>官网地址：<a href="http://www.wps.cn" target="_blank">http://www.wps.cn</a></p>
          <p style="font-size:20px">特点：类似于PowerPoint，不开源，可下载本地使用</p>
          <p>如果说PowerPoint已经Out了，那么<span style="color:#E65100">WPS难道就不Out吗！</span></p>
        </section>

        <section   class="level1 slide step" data-x="1200" data-y="-2600" data-z="500" data-rotate="90" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">OpenOffice之Impress演示</h1>
          <img src="images/openoffice_impress.png" style="width:700px;height:400px">
          <p style="font-size:25px">官网地址：<a href="http://www.openoffice.org/product/impress.html" target="_blank">http://www.openoffice.org/product/impress.html</a></p>
          <p style="font-size:20px">特点：类似于PowerPoint，Apache开源基金会项目，可下载本地使用
            <br>支持2D和3D的艺术字，标准为.odp格式，支持ppt,pptx, 还支持Flash的.swf格式。</p>
        </section>

        <section   class="level1 slide step" data-x="1200" data-y="-1600" data-z="500" data-rotate="90" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">苹果Mac系统之Keynote</h1>
          <img src="images/keynote.jpg" style="width:700px;height:400px">
          <p style="font-size:25px">官网地址：<a href="http://www.apple.com/cn/mac/keynote/" target="_blank">http://www.apple.com/cn/mac/keynote/</a></p>
          <p style="font-size:20px">特点：在苹果电脑下面制作幻灯的主力工具，但是没有Windows版。<br>象柴静关于雾霾的发布会，就是用keynote制作的。
          </p>
        </section>

        <section  class="level1 slide step" data-x="1200" data-y="-600" data-z="500" data-rotate="90" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Prezi</h1>
          <img src="images/prezi.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://prezi.com/" target="_blank">http://www.prezi.com/</a></p>
          <p style="font-size:20px">特点：这个神器很多人用过，并且有中文社区网站可以学到很多东西，做出来的效果狂拽酷炫型。
            之后很多演示工具都声称从Prezi得到灵感，例如我用的impress.js, 斧子演示等等。现在点击官网内容，首先跳出个价格给你看，并且不是基于H5的，所以我就不大喜欢了。
          </p>
        </section>

        <section  class="level1 slide step" data-x="1200" data-y="400" data-z="500" data-rotate="90" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">斧子演示AxeSlide</h1>
          <img src="images/axeslide.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://www.axeslide.com/" target="_blank">http://www.axeslide.com/</a></p>
          <p style="font-size:20px">特点：从Prezi得到灵感，但跟Prezi不一样，Axeslide是基于html5技术开发，云端存储，可在线和离线编辑，可随时在电脑、手机或平板设备上展示。产品闭源，但是可以免费使用，支持SVG，是款不错的Prezi替代品。
          </p>
        </section>

        <section  class="level1 slide step" data-x="1200" data-y="1400" data-z="550" data-rotate="180">
          <p style="font-size:40px;text-align:center;margin-top:80px;">在前面介绍的这些工具中</p>
          <p style="font-size:40px;text-align:center;margin-top:60px;">都是能够下载到桌面安装并能离线使用</p>
          <p style="font-size:40px;text-align:center;margin-top:60px;">除了这些安装在电脑上的工具 </p>
          <h1 style="font-size:50px;color:#E65100;text-align:center;margin-top:60px;">还有很多在线幻灯制作工具</h1>
          <p style="font-size:30px;text-align:center;margin-top:60px;">制作后直接保存在云端</p>
          <p style="font-size:30px;text-align:center;margin-top:60px;">有收费的，也有免费的，它们也用得很广泛:</p>
        </section>


        <section  class="level1 slide step" data-x="200" data-y="1400" data-z="500" data-rotate="180" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">微软的Sway</h1>
          <img src="images/sway.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://www.sway.com/" target="_blank">http://www.sway.com/</a></p>
          <p style="font-size:20px">特点：估计微软也是对自家的PowerPoint在某些方面看不下去了，才推出这个Sway，能从其它文档导入，但可惜不能导出，并且不能离线使用，使用sway就不用排版了，所有排版只要点几下，一切由Sway搞定。
          </p>
        </section>

        <section  class="level1 slide step" data-x="-800" data-y="1400" data-z="500" data-rotate="180" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">NO-PPT非常演示</h1>
          <img src="images/noppt.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://www.no-ppt.com/" target="_blank">http://www.no-ppt.com/</a></p>
          <p style="font-size:20px">特点：这个是最近的一家创业公司开发的一款产品，主打路演PPT制作，演示上抛弃了翻页过渡的概念，个人免费，也提供企业级的定制服务。我试过，制作完成后可以打包下载，不过这个包有点大。
          </p>
        </section>

        <section  class="level1 slide step" data-x="-1800" data-y="1400" data-z="500" data-rotate="180" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">IPresst</h1>
          <img src="images/ipresst.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://www.ipresst.com/" target="_blank">http://www.ipresst.com/</a></p>
          <p style="font-size:20px">特点：听说是腾讯的离职员工做的一款工具型产品，如果你要演示的内容以图片为主，不妨试试这个，看网站上显示，用得人还是挺多的。
          </p>
        </section>

        <section  class="level1 slide step" data-x="-2800" data-y="1400" data-z="500" data-rotate="180" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Slides.com</h1>
          <img src="images/slides_com.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://www.slides.com/" target="_blank">http://www.slides.com/</a></p>
          <p style="font-size:20px">特点：Reveal.js的作者就在做这个，原来的域名为http://slid.es 我觉得这两个域名都不错。我用Markdown做的文章可以用Pandoc转成reveal.js的幻灯。但对于不爱折腾的，用slides.com在线编辑真的很轻松。
          </p>
        </section>

        <section  class="level1 slide step" data-x="-3800" data-y="1400" data-z="500" data-rotate="180" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Strut</h1>
          <img src="images/strut.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://strut.io/" target="_blank">http://strut.io/</a></p>
          <p style="font-size:20px">特点：非常不错，编辑也很方便 .
            <br>关键是它还能导出成impress.js, bespoke.js这样的炫酷形式。
          </p>
        </section>

        <section  class="level1 slide step" data-x="-4800" data-y="1400" data-z="500" data-rotate="180" style="text-align:center" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">SLIDECAPTAIN</h1>
          <img src="images/slidecaptain.png" style="width:700px;height:400px"/>
          <p style="font-size:25px">官网地址：<a href="http://www.slidecaptain.com/" target="_blank">http://www.slidecaptain.com/</a></p>
          <p style="font-size:20px">特点：可以将任何内容插入到演示中，有兴趣可登录官网用一下。 </p>
        </section>


        <section  class="level1 slide step" data-x="-4800" data-y="400" data-z="550" data-rotate="270">
          <p style="font-size:40px;text-align:center;margin-top:60px;">在前面介绍的这些工具中</p>
          <p style="font-size:40px;text-align:center;margin-top:40px;">不管是在线的，还是离线的</p>
          <p style="font-size:40px;text-align:center;margin-top:40px;">基本上都是使用方便，且无需编码</p>
          <p style="font-size:40px;text-align:center;margin-top:40px;">那么，对象我这样<strong>喜欢折腾的人</strong></p>
          <h1 style="font-size:60px;color:#E65100;text-align:center;margin-top:40px;">会更喜欢用纯粹的<br><br>Html+Css+Javscript</h1>
          <p style="font-size:30px;text-align:center;margin-top:40px;">打造完全属于自己的演示</p>
          <p style="font-size:30px;text-align:center;margin-top:20px;">这样的开源框架也非常多:</p>
        </section>

        <section  class="level1 slide step" data-x="-4800" data-y="-600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">taciónJS</h1>
          <img src="images/tacion.png" style="width:700px;height:400px"/>
          <p>网址：<a href="http://azoff.github.io/tacion.js/" target="_blank">http://azoff.github.io/tacion.js/</a></p>
          <p>演示：<a href="http://azoff.github.com/tacion.js/examples/spain.js" target="_blank">http://azoff.github.com/tacion.js/examples/spain.js</a></p>
          <p>源代码：<a href="https://github.com/azoff/tacion.js" target="_blank">https://github.com/azoff/tacion.js</a></P>
        </section>

        <section  class="level1 slide step" data-x="-4800" data-y="-1600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Presentz</h1>
          <img src="images/presentz.png" style="width:700px;height:400px"/>
          <p>网址：<a href="http://presentz.org/" target="_blank">http://presentz.org/</a></p>
          <p>演示：<a href="http://presentz.org/#demo_home" target="_blank">http://presentz.org/#demo_home</a></p>
          <p>源代码：<a href="https://github.com/ffissore/presentz.org" target="_blank">https://github.com/ffissore/presentz.org</a></p>
        </section>

        <section  class="level1 slide step" data-x="-4800" data-y="-2600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Presenteer.js</h1>
          <img src="images/presenteer.png" style="width:700px;height:400px"/>
          <p>网址：<a href="http://willemmulder.github.io/Presenteer.js/" target="_blank">http://willemmulder.github.io/Presenteer.js/</a></p>
          <p>演示：<a style="font-size:20px" href="http://willemmulder.github.io/Presenteer.js/examples/fullscreen/index.html" target="_blank">http://willemmulder.github.io/Presenteer.js/examples/fullscreen/index.html</a></p>
          <p>源代码：<a href="https://github.com/willemmulder/Presenteer.js" target="_blank">https://github.com/willemmulder/Presenteer.js</a></p>
        </section>

        <section  class="level1 slide step" data-x="-4800" data-y="-3600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Cleaver</h1>
          <img src="images/cleaver.png" style="width:700px;height:400px"/>
          <p>主页上说，针对Hacker来说，只要30秒钟就能学会。</p>
          <p>网址：<a  href="http://jdan.github.io/cleaver/" target="_blank">http://jdan.github.io/cleaver/</a></p>
          <p>源代码：<a href="https://github.com/jdan/cleaver/" target="_blank">https://github.com/jdan/cleaver/</a></p>
        </section>

        <section  class="level1 slide step" data-x="-4000" data-y="-3600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">HoverForMore</h1>
          <img src="images/hoverformore.png" style="width:700px;height:400px"/>
          <p>网址：<a  href="http://lukifer.github.io/HoverForMore.js/" target="_blank">http://lukifer.github.io/HoverForMore.js/</a></p>
          <p>源代码：<a style="font-size:20px" href="http://lukifer.github.io/HoverForMore.js/jQuery.hoverForMore.js" target="_blank">http://lukifer.github.io/HoverForMore.js/jQuery.hoverForMore.js/ </a></p>
        </section>

        <section  class="level1 slide step" data-x="-4000" data-y="-2600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Perkele.js</h1>
          <img src="images/perkelejs.png" style="width:700px;height:400px"/>
          <p>网址：<a  href="http://kpuputti.github.io/perkele.js/" target="_blank">http://kpuputti.github.io/perkele.js/</a></p>
          <p>演示：<a  style="font-size:20px"  href="http://kpuputti.github.io/perkele.js/examples/wpo-basics/index.html" target="_blank">http://kpuputti.github.io/perkele.js/examples/wpo-basics/index.html</a></p>
          <p>源代码：<a href="https://github.com/kpuputti/perkele.js" target="_blank">https://github.com/kpuputti/perkele.js</a></p>
        </section>

        <section  class="level1 slide step" data-x="-4000" data-y="-1600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">slides</h1>
          <img src="images/slides.png" style="width:700px;height:400px"/>
          <p>注：此Slides不是之前介绍过的那个Slides</p>
          <p>网址：<a  href="http://www.briancavalier.com/code/slides/" target="_blank">http://www.briancavalier.com/code/slides/</a></p>
          <p>源代码：<a href="https://github.com/briancavalier/slides" target="_blank">https://github.com/briancavalier/slides</a></p>
        </section>

        <section  class="level1 slide step" data-x="-4000" data-y="-600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Beskpoke.js</h1>
          <img src="images/bespoke.png" style="width:700px;height:400px"/>
          <p>一个值得学习一下的微框架</p>
          <p>网址：<a  href="http://markdalgleish.com/projects/bespoke.js/" target="_blank">http://markdalgleish.com/projects/bespoke.js/</a></p>
          <p>源代码：<a href="https://github.com/bespokejs/bespoke" target="_blank">https://github.com/bespokejs/bespoke</a></p>
        </section>

        <section  class="level1 slide step" data-x="-4000" data-y="400" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Stack</h1>
          <img src="images/stack.png" style="width:700px;height:400px"/>
          <p>一个下拉式浏览的幻灯演示</p>
          <p>网址：<a  href="http://mbostock.github.io/stack/" target="_blank">http://mbostock.github.io/stack/</a></p>
          <p>源代码：<a  style="font-size:20px"  href="https://github.com/mbostock/stack/archive/gh-pages.zip" target="_blank">https://github.com/mbostock/stack/archive/gh-pages.zip</a></p>
        </section>

        <section  class="level1 slide step" data-x="-3200" data-y="400" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">ScrollDeck</h1>
          <img src="images/scrolldeck.png" style="width:700px;height:400px"/>

          <p>网址：<a  href="http://johnpolacek.github.io/scrolldeck.js/" target="_blank">http://johnpolacek.github.io/scrolldeck.js/</a></p>
          <p>源代码：<a href="https://github.com/johnpolacek/scrolldeck.js" target="_blank">https://github.com/johnpolacek/scrolldeck.js</a></p>
        </section>

        <section  class="level1 slide step" data-x="-3200" data-y="-600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">S5</h1>
          <img src="images/s5.png" style="width:700px;height:400px"/>
          <p>可以用Pandoc将markdown转成s5，但我发现s5有点老</p>
          <p>网址：<a  href="http://meyerweb.com/eric/tools/s5/s5-intro.html" target="_blank">http://meyerweb.com/eric/tools/s5/s5-intro.html</a></p>
          <p>源代码：<a  style="font-size:20px"  href="http://meyerweb.com/eric/tools/s5/v/1.2/dev/v12a2.zip" target="_blank">http://meyerweb.com/eric/tools/s5/v/1.2/dev/v12a2.zip</a></p>
        </section>

        <section  class="level1 slide step" data-x="-3200" data-y="-1600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Flowtime.js</h1>
          <img src="images/flowtime.png" style="width:700px;height:400px"/>
          <p>导航方式就象上面图示那样，是不错的演示框架</p>
          <p>网址：<a  href="http://flowtime-js.marcolago.com/" target="_blank">http://flowtime-js.marcolago.com/</a></p>
          <p>源代码：<a   href="https://github.com/marcolago/flowtime.js" target="_blank">https://github.com/marcolago/flowtime.js</a></p>
        </section>

        <section  class="level1 slide step" data-x="-3200" data-y="-2600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">DZSlides</h1>
          <img src="images/dzslides.png" style="width:700px;height:400px"/>
          <p>基于Html5和Css3的单页模板，也适合移动终端</p>
          <p>网址：<a  href="http://paulrouget.com/dzslides/" target="_blank">http://paulrouget.com/dzslides/</a></p>
          <p>源代码：<a   href="http://github.com/paulrouget/dzslides" target="_blank">http://github.com/paulrouget/dzslides</a></p>
        </section>

        <section  class="level1 slide step" data-x="-3200" data-y="-3600" data-z="500" data-rotate="270" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Fathom.js</h1>
          <img src="images/fathom.png" style="width:700px;height:400px"/>
          <p>网址：<a  href="http://markdalgleish.com/projects/fathom/" target="_blank">http://markdalgleish.com/projects/fathom/</a></p>
          <p>演示：<a  style="font-size:20px"  href="http://markdalgleish.com/presentations/jquerymobile" target="_blank">http://markdalgleish.com/presentations/jquerymobile</a></p>
          <p>源代码：<a href="http://github.com/markdalgleish/fathom" target="_blank">http://github.com/markdalgleish/fathom</a>
          </p>
        </section>

        <section  class="level1 slide step" data-x="-2400" data-y="-3600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Deck.js</h1>
          <img src="images/deck.png" style="width:700px;height:400px"/>
          <p>网址：<a  href="http://imakewebthings.com/deck.js/" target="_blank">http://imakewebthings.com/deck.js/ </a></p>
          <p>源代码：<a  style="font-size:20px"  href="https://github.com/imakewebthings/deck.js/archive/latest.zip" target="_blank">https://github.com/imakewebthings/deck.js/archive/latest.zip</a></p>
        </section>

        <section  class="level1 slide step" data-x="-2400" data-y="-2600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Shower</h1>
          <img src="images/shower.png" style="width:700px;height:400px"/>
          <p>网址：<a  href="https://shwr.me/" target="_blank">https://shwr.me/</a></p>
          <p>源代码：<a  href="http://shwr.me/shower.zip" target="_blank">http://shwr.me/shower.zip</a></p>
        </section>

        <section  class="level1 slide step" data-x="-2400" data-y="-1600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Jmpress</h1>
          <img src="images/jmpress.png" style="width:700px;height:400px"/>
          <p>Jquery 版的impress.js</p>
          <p>网址：<a  href="http://jmpressjs.github.io/jmpress.js/" target="_blank">http://jmpressjs.github.io/jmpress.js/</a></p>
          <p>源代码：<a  href="https://github.com/jmpressjs/jmpress.js" target="_blank">https://github.com/jmpressjs/jmpress.js</a></p>
        </section>
        <section  class="level1 slide step" data-x="-2400" data-y="-600" data-z="500" data-rotate="90" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">Googe IO-2012</h1>
          <img src="images/io2012.png" style="width:700px;height:400px"/>
          <p>不用被2012迷惑，表示从2012年开始开发，是原<a href="http://html5slides.googlecode.com/svn/trunk/template/index.html#1">Html5Slides</a>的改进版本</p>
          <p>网址：<a  style="font-size:20px"  href="http://io-2012-slides.googlecode.com/git/template.html" target="_blank">http://jmpressjs.github.io/jmpress.js/</a></p>
          <p>源代码：<a  href="http://io-2012-slides.googlecode.com/git/" target="_blank">http://io-2012-slides.googlecode.com/git/</a></p>
        </section>

        <section  class="level1 slide step" data-x="-2400" data-y="400" data-z="500" data-rotate="90" >
          <p style="font-size:40px;text-align:center;margin-top:60px;">是不是有点应接不暇</p>
          <p style="font-size:30px;text-align:center;margin-top:40px;">还有象<a href="https://github.com/puppetlabs/showoff"> Showoff</a>,<a href="https://github.com/nakajima/slidedown">SlideDown</a>,<a href="https://www.w3.org/Talks/Tools/Slidy2">W3C Html Slidy 2</a>等等，因为年代有点久远等原因，就不再一一个介绍了。</p>
          <p style="font-size:40px;text-align:center;margin-top:40px;">对于这么多的幻灯工具</p>
          <h1 style="font-size:60px;color:#E65100;text-align:center;margin-top:60px;">我最喜欢的是哪几个呢？</h1>
          <br>
          <p style="font-size:40px;text-align:center;margin-top:20px;">不好意思，我最喜欢的还没介绍</p>
          <p style="font-size:50px;text-align:center;margin-top:20px;"><strong>它们分别是：</strong></p>
        </section>

        <section  class="level1 slide step" data-x="-1300" data-y="-3000" data-z="2000" data-rotate-x="-45" data-scale="2" >
          <h1 style="font-size:50px;text-align:center;margin:20px;">我喜欢用<span style="color:#E65100">RevealJS</span></h1>
          <img src="images/reveal.png" style="width:700px;height:400px"/>
          <p>网址：<a  href="http://lab.hakim.se/reveal-js/" target="_blank">http://lab.hakim.se/reveal-js/</a></p>
          <p>源代码：<a  href="https://github.com/hakimel/reveal.js" target="_blank">https://github.com/hakimel/reveal.js</a></p>
          <p>它不但功能强大，开源，而且它内部和外部<span style="color:#E65100">都能使用Markdown</span>，前面那个内嵌演示用的就是它。</p>

        </section>

        <section  class="level1 slide step" data-x="-1300" data-y="-2000" data-z="1200" data-rotate-x="-45" data-scale="2">
          <h1 style="font-size:50px;text-align:center;margin:20px;">我喜欢用<span style="color:#E65100">ImpressJS<sup>*</sup></span></h1>
          <img src="images/impress.png" style="width:700px;height:400px"/>
          <p>网址和演示：<a  href="http://impress.github.io/impress.js/#/bored" target="_blank">http://impress.github.io/impress.js/#/bored</a></p>
          <p>源代码：<a  href="http://impress.github.io/impress.js" target="_blank">http://impress.github.io/impress.js</a></p>
          <p>基于MIT许可，基于无限大的画布上随意创建任何3D演示。因为基于Html，所以可以<span style="color:#E65100">随心所欲，天马行空</span></p>
        </section>

        <section  class="level1 slide step" data-x="-1300" data-y="-1000" data-z="400" data-rotate-x="-45" data-scale="2" >
        <p style="font-size:40px;text-align:center;margin-top:50px;">使用<span style="color:#E65100">ImpressJS<sup>*</sup></sup></span>唯一的限制就是</p>
        <p style="font-size:60px;text-align:center;margin-top:30px;color:#E65100">您的想像力</p>
        <img style="width:400px;height:250px;text-align:center;margin:20px 50px 20px 180px;" src="images/xxl.jpg" />
        <p style="font-size:40px;text-align:center;margin-top:10px;">而我只会编码，不会美工，更没有想像力</p>
        <p style="font-size:40px;text-align:center;margin-top:40px;">所以演示总是做得很难看</p>
        </section>

        <section  class="level1 slide step" data-x="-1300" data-y="0" data-z="-200" data-rotate-x="-45" data-scale="2" >
        <p style="font-size:40px;text-align:center;margin-top:50px;">如果您不会用<span style="color:#E65100">RevealJS</p>
        <p style="font-size:40px;text-align:center;margin-top:30px;">建议您可以使用<a href="#/step-16">Slides.com</a>在线工具</p>
       <p style="font-size:40px;text-align:center;margin-top:50px;">如果您不会用<span style="color:#E65100">ImpressJS<sup>*</sup></sup></span></p>
        <p style="font-size:40px;text-align:center;margin-top:30px;">建议您可以使用<a href="#/step-17">Strut</a>在线工具</p>
        <p style="font-size:40px;text-align:center;margin-top:40px;">或者</a>
        <p style="font-size:40px;text-align:center;margin-top:40px;">使用<a href="#/step-11">斧子演示</a> <a href="#/step-10">Prezi</a>这样的工具</p>
        <p style="font-size:40px;text-align:center;margin-top:40px;">它们都无需任何编码知识</p>
    </section>

        <section  class="level1 slide step" data-x="-1300" data-y="1000" data-z="-1000" data-rotate-x="-45" data-scale="2" >
        <p style="font-size:30px;text-align:center;margin-top:60px;">感谢党</p>
        <p style="font-size:40px;text-align:center;margin-top:35px;">感谢政府</p>
        <p style="font-size:50px;text-align:center;margin-top:50px;">感谢开源</p>
        <p style="font-size:60px;text-align:center;margin-top:60px;">感谢互联网</p>
        <p style="font-size:70px;text-align:center;margin-top:70px;color:#E65100">谢谢您的访问</p>
      </section>

      <section id="overview" class="level1 step" data-x="-2000" data-y="-1500" data-scale="9" data-z="500" data-rotate-x="-30">
      </section>
    </div>

    <div class="hint">
      <p>请使用空格或者箭头键进行操控</p>
    </div>
    <script>
      if ("ontouchstart" in document.documentElement) {
        document.querySelector(".hint").innerHTML = "<p>轻触左边或右边进行操控</p>";
      }
    </script>

    <script src="js/impress.js"></script>
    <script>impress().init();</script>

  </body>
</html>
